<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>捷恩瑞信息</title>
		<style type="text/css">
			body {
				font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
				background-color: whitesmoke;
				margin: 0;
				padding: 0;
				color: #000;
			}

			/* ~~ 元素/标签选择器 ~~ */
			ul,	ol,	dl {
				/* 由于浏览器之间的差异，最佳做法是在列表中将填充和边距都设置为零。为了保持一致，您可以在此处指定需要的数值，也可以在列表所包含的列表项（LI、DT 和 DD）中指定需要的数值。 */
				padding: 0;
				margin: 0;
			}

			h1,	h2,	h3,	h4,	h5,	h6,	p {
				margin-top: 0;
				/* 删除上边距可以解决边距会超出其包含的 div 的问题。剩余的下边距可以使 div 与后面的任何元素保持一定距离。 */
				padding-right: 15px;
				padding-left: 15px;
				/* 向 div 内的元素侧边（而不是 div 自身）添加填充可避免使用任何方框模型数学。此外，也可将具有侧边填充的嵌套 div 用作替代方法。 */
			}

			/* ~~ 此容器包含所有其它 div，并依百分比设定其宽度 ~~ */
			.container {
				width:960px;
				/* 可能需要最小宽度，以防止此布局过窄。这将使侧面列中的行长度更便于阅读。 */
				background-color: #FFF;
				margin: 0 auto;
				/* 侧边的自动值与宽度结合使用，可以将布局居中对齐。如果将 .container 宽度设置为 100%，则不需要此设置。 */
			}

			/* ~~ 标题未指定宽度。它将扩展到布局的完整宽度。~~ */
			.header {
				background-color: #eFeDe4;
				background-image: url(images/bg1.jpg) ;
				background-size:100% 100%;
			}

			.sidebar1 {
				float: left;
				width: 20%;
				padding-bottom: 10px;
			}

			.content {
				padding: 10px 0;
				width: calc(60% - 2px);
				float: left;
				border-left:solid thin lightgray;
				border-right:solid thin lightgray;
			}

			.sidebar2 {
				float: left;
				width: 20%;
				padding: 10px 0;
			}

			/* ~~ 此分组的选择器为 .content 区域中的列表提供了空间 ~~ */
			.content ul, .content ol {
				padding: 0 15px 15px 40px;
				/* 此填充反映上述标题和段落规则中的右填充。填充放置于下方可用于间隔列表中其它元素，置于左侧可用于创建缩进。您可以根据需要进行调整。 */
			}

			/* ~~ 导航列表样式（如果选择使用预先创建的 Spry 等弹出菜单，则可以删除此样式） ~~ */
			ul.nav {
				list-style: none;
				/* 这将删除列表标记 */
				border-top: 1px solid #666;
				/* 这将为链接创建上边框  */
				margin-bottom: 15px;
				/* 这将在下面内容的导航之间创建间距 */
			}

			ul.nav li {
				border-bottom: 1px solid #666;/* 为链接创建下边框  */			
			}

			ul.nav a,
			ul.nav a:visited {
				/* 对这些选择器进行分组可确保链接即使在访问之后也能保持其按钮外观 */
				padding: 5px 5px 5px 15px;
				display: block;
				/* 这将为链接赋予块属性，使其填满包含它的整个 LI。这样，整个区域都可以响应鼠标单击操作。 */
				text-decoration: none;
					color: #000;
			}

			ul.nav a:hover,	ul.nav a:active,ul.nav a:focus {
				/* 这将更改鼠标和键盘导航的背景和文本颜色 */
				background-color: #6F7D94;
				color: #FFF;
			}

			/* ~~ 脚注 ~~ */
			.footer {
				padding: 3px 0;
				background-color: lightgray;
				border-top: lightgray solid thin;
				position: relative;
				text-align: center;
				clear: both;/* 清除浮动 */
			}
			</style>
	</head>
	<body>
		<div class="container">
			<div class="header"><a href="#"><img src="images/logo.png" alt="在此处插入徽标" name="Insert_logo" height="90" id="Insert_logo"/></a>
				<!-- end .header -->
			</div>
			<div class="sidebar1">
				<ul class="nav">
					<li><a href="#">产品</a></li>
					<li><a href="#">服务</a></li>
					<li><a href="#">关于我们</a></li>
					<li><a href="#">联系我们</a></li>
				</ul>
			
				<p>热　线：</p><p>800-800-8888</p>
				<p>市场部：</p><p>010-88888888</p>
				<p>邮　件：</p><p>info@jnr.com</p>
				<p>邮　编：</p><p>100051</p>
				<p>地　址：</p><p>北京市海淀区民主路6001号1-5号 </p>
				<!-- end .sidebar1 -->
			</div>
			<div class="content">
				<h1>JnR信息</h1>
				<p>JnR信息是国家权威认定高新技术企业。2018年成立，在智慧工厂、商业智能分析和服务领域有着较高的知名度和良好口碑。
在信息化建设中，随着IT与业务进一步融合，IT成为推动业务转型、管理变革的重要力量。本公司立足于客户需求和目标，借助物联网、云计算、大数据、人工智能、视觉识别等新技术，开发出“快速解决问题、带来商业价值的软件”为客户实现业务升级，降低成本、提升效益。</p>
				<h2>主要产品</h2>
<h4>卡牌/手环</h4>
<p>提供多种款式智能手环/卡牌定制服务，功能齐全，质优价廉!</p>
<h4>标签打印机</h4>
<p>性能稳定，操作简单，适用于零售、仓储、物流、纺织等行业。</p>
<h4>织机采集器</h4>
<p>织机效率、产量、停台次数、停台时间、织缩、车速、等数据的记录、统计及汇总等。</p>
<h4>视觉识别</h4>
<p>专业的项目团队和丰富的视觉经验，为您制定成熟的机器视觉识别/视觉检测方案。</p>
	
						<!-- end .content -->
			</div>
			<div class="sidebar2">
				<h4>获奖</h4>
				<p>2020年8月31日，由中国电子商务协会产业链整合委员会指导，B2B内参、产业互联网头条和供应链金融头条联合主办的2020中国B2B供应链金融峰会在北京昆泰酒店隆重开幕，上千名中国B2B行业及供应链金融行业的精英出席了此次峰会，共同见证年度B2B供应链金融领域的顶尖盛会。本公司开发的供应链金融服务综合系统荣获2020中国B2B供应链金融创新大奖</p>
				<!-- end .sidebar2 -->
			</div>
			<div class="footer">
				<p>版权所有 Copyright&copy; JnR信息技术有限公司</p>
				<p>技术支持 Copyright&copy; 孝感工业学校 杨勋</p>
				<!-- end .footer -->
			</div>
			<!-- end .container -->
		</div>
	</body>
</html>
